<template>
	<view class="area-b">
		<u-navbar title="我的表情">
			<view class="u-m-r-30" slot="right">
				<text @tap="tapEdit">{{edit?'完成':'整理'}}</text>
			</view>
		</u-navbar>
		<view class="face-box" :class="{edit:edit}">
			<view class="item u-flex u-row-center" @tap="chooseFace">
				<text class="add cuIcon-add text-gray"></text>
			</view>
			<view class="item" v-for="(item,idx) in faces" :key="item.id" @tap="pick(item)">
				<image class="img" :src="item.imgUrl" mode="aspectFit"></image>
				<view class="checkbox" :class="{checked:selected.some((id)=>id==item.id)}">
					<text class="icon iconfont icon-check"></text>
				</view>
			</view>
		</view>
		<view class="foot area-b" v-if="edit">
			<view class="tool-bar">
				<text class="text-black u-font-32" :class="{disable:!selected.length}" @tap="toTop">移到前面</text>
				<text class="text-red u-font-32" :class="{disable:!selected.length}" @tap="remove">删除</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		chooseImage,
		getImageInfo,
		compressImage,
		uploadFile
	} from "@/utils/file.js"
	import {mapGetters,mapActions} from "vuex"
	import {getMyfaces,removeFace,addFace,topFace} from "@/api/face.js"
	export default {
		data() {
			return {
				edit:false, 
				selected:[],
				faces:[],
				pageNo:1,
				pageSize:80,
				nomore:false,
				loading:false,
				changed:false 
			};
		},
		onLoad() {
			this.reset()
		},
		onUnload(){
			if(this.changed){
				uni.$emit('custom_face_changed')
			}
		},
		methods:{
			tapEdit(){
				if(this.edit){
					this.edit = false
					this.selected = []
				}else{
					this.edit = true
				}
			},
			async reset(){
				this.faces = []
				this.pageNo = 1
				this.nomore = false
				await this.more()
			},
			async more(){
				const list = await this.getFaces()
				this.faces.push(...list)
			},
			async getFaces(){
				if(this.loading){
					throw new Error('正在请求中')
				}
				try{
					this.loading = true
					if(this.nomore){
						return []
					}
					const list = await getMyfaces({pageNo:this.pageNo,pageSize:this.pageSize})
					if(!list||list.length<this.pageSize){
						this.nomore = true
					}else{
						this.pageNo++
					}
					console.log(list)
					return list.map((item)=>({...item,check:false}))
				}finally{
					this.loading = false
				}
			},
			pick(face){
				if(this.selected.some(item=>item==face.id)){
					this.selected.filter(item=>item!=face.id)
				}else{
					this.selected.push(face.id)
				}
			},
			async chooseFace(){
				const {
					tempFiles:[file]
				} = await chooseImage({
					count:1,
					sourceType:['album']
				})
				const {tempFilePath} = await compressImage({
					src:file.path,
					quality:100,
					width:'400px',
					height:'auto',
					compressedWidth:400
				})
				const {width,height} = await getImageInfo({
					src: tempFilePath
				})
				const imgUrl = await uploadFile({
					file:tempFilePath
				})
				await addFace({
					imgUrl,
					imgHeight:height,
					imgWidth:width
				})
				this.reset()
				this.changed = true
			},
			async toTop(){
				await topFace(this.selected.join(','))
				this.selected = []
				this.reset()
				this.changed = true
			},
			async remove(){
				await removeFace(this.selected.join(','))
				this.selected = []
				this.reset()
				this.changed = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.face-box{
		display: flex;
		flex-wrap: wrap;
		.item{
			width: 150rpx;
			height: 150rpx;
			padding: 10rpx;
			border-right: 1rpx solid #cccccc;
			border-bottom: 1rpx solid #cccccc;
			position: relative;
			&:nth-of-type(5n){
				border-right: none;
			}
		}
		.add{
			font-size: 100rpx;
		}
		.img{
			width: 100%;
			height: 100%;
		}
		&.edit{
			.checkbox{
				display: flex;
			}
		}
		.checkbox{
			position: absolute;
			top: 10rpx;
			left: 10rpx;
			width: 40rpx;
			height: 40rpx;
			border: 4rpx solid #aaaaaa;
			border-radius: 50%;
			display: none;
			align-items: center;
			justify-content: center;
			.icon{
				font-size: 28rpx;
				color: transparent;
			}
			&.checked{
				background-color: #39b54a;
				border-color: #39b54a;
				.icon{
					color: #ffffff;
				}
			}
		}
	}
	.foot{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffffff;
	}
	.tool-bar{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.disable{
			opacity: 0.3;
			pointer-events: none;
		}
	}
</style>
